<template>
    <el-container>
        <el-header>
            <div class="titleLeft">
              <img src="../assets/sixlogo.png" alt="">
            </div>
            <div class="headRight">
              <div class="conpanyname">{{user}}</div><br />
              <div class="out" @click="out">退出</div>
            </div>
        </el-header>

        <el-container>
            <el-aside width="244px">
      <div class="menu">

          <div class="indexpage" :class="{active: activeStyle== 'Home'}" @click="toHome">
            <div class="imgbox"><img src="../assets/index.png" alt=""></div>
              <span>首页</span>
          </div>
           <div style="clear:both;height: 1px !important;"></div>

          <div class="indexpage">
            <div class="imgbox"><img src="../assets/function.png" alt=""></div>
              <span>功能</span>
          </div>
          <div style="clear:both;height: 1px !important;"></div>

          <div class="smallIndex" @click="newFeature" :class="{active: activeStyle== 'newFeature'}">
            新建任务
          </div>

           <div class="smallIndex" @click="batchFeature" :class="{active: activeStyle== 'newFiveFeature'}">
            批量创建任务
          </div>
           <div class="smallIndex" @click="searchFeature" :class="{active: activeStyle== 'searchFeature'}">
            搜索创建任务
          </div>
          <div class="smallIndex" @click="achieveFeature" :class="{active: activeStyle== 'achieveFeature'}">
            已完成任务列表
          </div>

          <div class="indexpage">
              <div class="imgbox"><img src="../assets/management.png" alt=""></div>
              <span>管理</span>
          </div>

          <div class="smallIndex" @click="keywordSafeguard" :class="{active: activeStyle== 'keywordSafeguard'}">
            关键词维护
          </div>

          <div class="smallIndex" @click="templateSafeguard" :class="{active: activeStyle== 'templateSafeguard'}">
            关键词模块维护
          </div>

          <div class="smallIndex" @click="searchSafeguard" :class="{active: activeStyle== 'searchSafeguard'}">
            搜索限制维护
          </div>

      </div>
  <!-- </el-col>
  </el-row>
  </el-col>

</el-row> -->
</el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data () {
      return {
        userData: 0,
        user: '',
        activeStyle: this.$route.name
      }
    },
    mounted () {
        this.userData = localStorage.getItem('userData')
        // console.log( this.userData)
        this.user = localStorage.getItem('user')
    },
    methods: {
      out() {
        // console.log(123)
        localStorage.removeItem('userData')
        localStorage.removeItem('user');
        localStorage.removeItem('userToken')
        this.$router.push({path: '/login'})
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
        this.activeStyle = this.$route.name
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      toHome () {
    // console.log(123)
        this.$router.push({path: '/home'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    searchFeature () {
        this.$router.push({path: '/searchFeature'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    // ckj 已完成任务跳转
    achieveFeature () {
        this.$router.push({path: '/achieveFeature'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    // ckj 新建任务跳转
    newFeature () {
        this.$router.push({path: '/newFeature'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    batchFeature () {
        this.$router.push({path: '/newFiveFeature'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    keywordSafeguard () {
        this.$router.push({path: '/keywordSafeguard'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    templateSafeguard () {
        this.$router.push({path: '/templateSafeguard'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    },
    searchSafeguard () {
        this.$router.push({path: '/searchSafeguard'})
        // console.log(this.$route.name)
        this.activeStyle = this.$route.name
    }
    },
    watch: {
      $route: {
        handler: function(val, oldVal){
          // console.log(val.name);
          this.activeStyle = val.name
        },
        // 深度观察监听
        deep: true
      }
  }
}
</script>

<style lang="scss" scoped>
   #app {
     overflow-y: hidden;
   }

   .active {
     background-color: #4083E7;
   }

    .el-menu-item {
        font-size: 18px;
        text-align: center;
        padding: 0 160px;
    }
    .el-submenu__title {
        font-size: 20px;
        text-align: center;
        padding: 0 160px;
    }
    .el-submenu .el-menu-item {
        height: 60px;
        font-size: 15px;
        padding: 0 160px;
    }
    .el-header{
      position: fixed;
      top: 0;
      left: 0;
      right: 16px;
      z-index: 999;
    background-color: #FFFFFF;
    color: #333;
    height: 60px;
    line-height: 60px;
    .titleLeft {
      margin-top: 7px;
        float: left;
        font-size: 22px;
        color: #2B2B2B;
    }
  }
  
  .el-aside {
    position: fixed;
    left: 0;
    top: 60px;
    background-color: #2D3243;
    text-align: center;
    line-height: 200px;
    // width: 246px;
    // height: 909px;
    bottom: 0;
  }
  .headRight {
    margin-top: 10px;
    float: right;
    font-size: 15px;
    line-height: 25px;
    padding-right: 30px;
    .conpanyname {
       float: right;
    }
    .out{
      float: right;
      font-size: 12px;
      color: #ac5050;
      cursor: pointer;
    }
  }
  
  .el-main {
    padding-left: 265px;
    padding-top: 80px;
    background-color: rgb(250, 247, 250);
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  .el-container {
    height: 102%;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-submenu__icon-arrow {
    top: 50% !important;
    }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .menu {
      >div {
        height: 60px;
        color: #fff;
        cursor: pointer;
        text-align: left;
        line-height: 60px;
      }
      .indexpage {
        padding-left: 28px;
        font-size: 20px;
        .imgbox {
          height: 100%;
           margin-right: 18px;
           float: left;
           margin-top: 5px;
        }
        span {
          display: inline-block;
        }
      }
      .smallIndex {
        padding-left: 68px;
      }
  }



</style>
